<template>
    <div class="engineer">
        <el-row :gutter="-5" class="row_1">
            <el-col :span="6" class="col_1">
                <span>工程师姓名：</span>
                <el-input v-model="inputEngineer" placeholder="请输入工程师姓名" clearable style="width: 200px" clearable></el-input>
            </el-col>
            <el-col :span="5" class="col_2">
                <el-button type="primary" @click="searchEngineer">查询</el-button>
            </el-col>
<!--            <el-col class="col_3">-->
                <el-button type="primary" @click="DialogVisible" class="add">添加工程师</el-button>
<!--            </el-col>-->
        </el-row>

        <el-table
                :data="engineerData"
                style="width: 100%"
                stripe
        >
            <el-table-column
                    prop="id"
                    label="工程师ID"
                    align="center"
                   >
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="工程师工号"
                    align="center"
                   >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="工程师姓名"
                    align="center"
                   >
            </el-table-column>
            <el-table-column
                    prop="job"
                    label="工程师职位"
                    align="center"
                   >
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="工程师电话"
                    align="center"
                   >
            </el-table-column>
            <el-table-column  label="操作" align="center">
                <template v-slot="slot">
                    <el-button type="primary" class="tag_1" @click="editEngineer(slot.row.id)" plain size="mini">修改信息</el-button>
                    <el-button type="danger" class="tag_1" @click="deleteEngineer(slot.row.id)" plain size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        分页-->
        <el-pagination
                @size-change="handleSizeEngineer"
                @current-change="handleCurrentEngineer"
                :current-page.sync="queryEngineer.page"
                :page-size="queryEngineer.limit"
                layout="total, prev, pager, next"
                :total="tatils"
                background>
        </el-pagination>
<!--        添加工程师-->
        <el-dialog
                :title="this.engineerAddorEdit?'修改信息':'添加工程师'"
                :visible.sync="isDialogVisible"
                width="40%"
                @close="setCloseRoles"
             >
            <el-form ref="engineerFormRef" :model="engineerForm" label-width="80px" :rules="engineerFormRules">
                <el-form-item label="工号" prop="number">
                    <el-input v-model="engineerForm.number" placeholder="请输入工号"></el-input>
                    <span style="font-size: 12px;color:#cccccc">禁止以0开头，且数位必须6位以上比如：100001</span>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="engineerForm.password" type="password" placeholder="请输入与密码"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="engineerForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="工位" >
                    <el-select
                            v-model="engineerForm.selectJob"
                            :multiple="false"
                            collapse-tags
                            style="margin-left: 20px;"
                            placeholder="请选择"

                    >
                        <el-option
                                v-for="item in selectJobData"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" phone="phone" >
                    <el-input v-model="engineerForm.phone" placeholder="请输入电话号码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="isDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addEngineer">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "engineer",
        data(){
            const validateNumber=(rule,value,callback)=>{
                let regNumber=/^[1-9]\d*$/;
                if(!regNumber.test(value)){
                    callback(new Error("禁止以0开头"))
                }else if (value.length<6){
                    callback(new Error("数位必须六位及以上"))
                } else{
                    callback();
                }
            };
            return{
                inputEngineer:'',
                queryEngineer:{
                    page:1,
                    limit:5,
                },
                tatils:0,
                engineerData:[],
                isDialogVisible:false,
                selectJobData:[
                    {
                        id: 1,
                        title: "高级工程师"
                    },
                    {
                        id: 2,
                        title: "中级工程师"
                    },
                    {
                        id: 3,
                        title: "初级工程师"
                    }
                ],
                engineerForm:{
                    number:"",
                    password:'',
                    name:'',
                    selectJob:'',
                    phone:'',
                },
                engineerFormRules:{
                    number:[
                        {required:true,message:'不能为空',tigger:'blur'},
                        {validator:validateNumber,trigger:'blur'}
                    ],
                    password:[{required:true,message:'不能为空',tigger:'blur'}],
                    name:[{required:true,message:'不能为空',tigger:'blur'}],
                    job:[{required:true,message:'不能为空',tigger:'blur'}],
                    phone:[
                        {required:true,message:'不能为空',tigger:'blur'},
                        {min:6,max:11,message: "请输入正确的电话号码",tiggrt:'blur'}
                    ],

                },
                engineerAddorEdit:false

            }
        },
        created() {
            this.getEngineer();
        },
        methods:{
            searchEngineer(){

            },
            async getEngineer(){
                const {data:res}=await this.$http.get("engineer",{params:this.queryEngineer});
                // console.log(res);
                if(res.code!==1){
                    return this.$message.error("获取数据失败");
                }
                this.engineerData=res.result.data;
                this.tatils=res.result.limitCount;

            },
            addEngineer(){
                this.$refs.engineerFormRef.validate(async valid=>{
                    if(valid){
                        const {data:res}=await this.$http.get(
                            "/engineer/create?number=" +
                            this.engineerForm.number +
                            "&name=" +
                            this.engineerForm.name +
                            "&password=" +
                            this.engineerForm.password +
                            "&job=" +
                            this.engineerForm.selectJob +
                            "&phone=" +
                            this.engineerForm.phone
                        );
                        // console.log(res);
                        if(res.code===1){
                            this.$message.success("添加成功");
                            this.getEngineer();
                            this.isDialogVisible=false;
                        }else{
                            this.$message.error("添加失败");
                        }
                    }else{
                        return ;
                    }
                })
            },
            handleSizeEngineer(newSize){
                this.queryEngineer.limit=newSize;
                this.getEngineer();

            },
            handleCurrentEngineer(newNum){
                this.queryEngineer.page=newNum;
                this.getEngineer();
            },
            setCloseRoles(){
                this.$refs.engineerFormRef.resetFields();
                this.engineerForm={};

            },
            DialogVisible(){
                this.isDialogVisible=true;
                this.engineerAddorEdit=false
            },
            async deleteEngineer(id){
                const confirmRerult=await this.$confirm("此操作将永久删除该项，是否继续?","提示",{
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                    type:"warning"
                }).catch(err=>err);
                if(confirmRerult!=="confirm"){
                    return this.$message.info("已经取消删除");
                }else{
                    const{data:res}=await this.$http.delete(`engineer/${id}`);
                    if(res.code===1){
                        this.$message.success("删除成功");
                        this.getEngineer();
                    }else{
                        this.$message.error("删除失败");
                    }
                }
            },
            async editEngineer(id){
                const{data:res}=await this.$http.get(`engineer/${id}`);
                if(res.code!==1){
                    return this.$message.error("查询失败");
                }
                // console.log(res);
                this.engineerForm={};
                this.engineerForm=res.result;
                if (res.result.job==="高级工程师"){
                    this.engineerForm.selectJob=1;
                }else if(res.result.job==="中级工程师"){
                    this.engineerForm.selectJob=2;
                }else{
                    this.engineerForm.selectJob=3;
                }
                this.engineerAddorEdit=true;
                this.isDialogVisible=true;
                // console.log(this.engineerForm);

            }
        }
    }
</script>

<style lang="less" scoped>
    .row_1 {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        position: relative;

        .col_1 {
            margin: 15px 0 15px 20px;

            span {
                font-size: 13px;

            }
        }

        .col_2 {
            .col_1();
            margin-left: -30px;
            margin-right: 0;
        }

           .add{
               position: absolute;
               right: 20px;
               top: 15px;
           }

    }
    .tag_1{
        /*margin-right: 5px;*/
        cursor: pointer;
    }
    .el-pagination{
        text-align: center;
        margin-top: 10px;
    }
    .el-table{
        padding-left: 10px;
        padding-right: 10px;
    }
</style>
